
<template>
  <div style="width: 100%; height: 100%">

    <!--学生信息-->
    <el-descriptions :data="studentsData" class="margin-top" title="学生信息列表框" :column="1" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="handleEdit">修改信息</el-button>
        <el-button type="primary" size="small" @click="handlePassEdit">修改密码</el-button>
      </template>
      <el-descriptions-item >
        <template slot="label" >
          <i class="el-icon-user" ></i>
          用户名
        </template>
        {{this.user.username}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          姓名
        </template>
        {{ studentsData.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i>
          生日
        </template>
        {{ studentsData.dob }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-help"></i>
          性别
        </template>
        {{studentsData.gender }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ studentsData.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          居住地
        </template>
        {{ studentsData.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-management"></i>
          学历
        </template>
        {{ studentsData.education }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-video-camera"></i>
          经历
        </template>
        {{studentsData.experience}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-thumb"></i>
          特长
        </template>
        {{studentsData.skills}}
      </el-descriptions-item>
    </el-descriptions>


    <!-- 新增/编辑学生模态框 -->
    <el-dialog title="编辑个人信息" :visible.sync="dialogVisible" width="30%">
      <el-form :model="editItem" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="editItem.name"></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
              v-model="editItem.dob"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="editItem.gender" placeholder="请选择">
            <el-option label="male" value="男"></el-option>
            <el-option label="female" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editItem.phone"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input type="textarea" v-model="editItem.education"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="textarea" v-model="editItem.address"></el-input>
        </el-form-item>
        <el-form-item label="经历">
          <el-input type="textarea" v-model="editItem.experience"></el-input>
        </el-form-item>
        <el-form-item label="特长">
          <el-input type="textarea" v-model="editItem.skills"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSaveEdit">保存</el-button>
      </div>
    </el-dialog>



    <el-dialog title="密码修改" :visible.sync="dialogVisible1" width="30%" >
      <el-form :model="editItem" label-width="100px" >
        <el-form-item label="账号名称">
          <el-input v-model="editItem.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" show-password v-model="editItem.password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSavePassEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "StudentView1",
  data() {
    return {
      editItem:{
        username:'',
        password:'',
        email:'',
        user_id:'',
        name:'',
        dob:'',
        gender:'',
        phone:'',
        address:'',
        resume:null,
        education:'',
        experience:'',
        skills:'',
      },
      dialogVisible:false,//不可编辑状态
      dialogVisible1:false,
      studentsData: {}, // 学生信息列表
      user:JSON.parse(localStorage.getItem('userData')) || {},
    }
  },
  mounted() {
    this.fetchStudent();
  },
  methods: {
    fetchStudent(){
      axios.get("http://localhost:8080/Student/selectByStudentId",{
        params: {
          user_id: this.user.user_id
        }
      })
          .then(response=>{
            this.studentsData=Object.assign({}, response.data.data[0]);
            localStorage.setItem('student_id',this.studentsData.student_id)
          })
          .catch(error => {
            console.error('Error fetching students:', error);
          });
    },
    handleEdit(){
      this.editItem = Object.assign({}, this.studentsData);
      // 设置编辑状态为true
      this.dialogVisible = true;
    },
    handleSaveEdit(){
      console.log(this.editItem)
      axios.put("http://localhost:8080/Student/edit", this.editItem)
          .then(response => {
            // 处理编辑成功逻辑
            this.$message.success("编辑成功");
            this.closeDialog();
            this.fetchStudent(); // 刷新数据
          })
          .catch(error => {
            // 处理编辑失败逻辑
            console.error('Error editing item:', error);
            this.$message.error("编辑失败");
          });
    },
    handlePassEdit(){
      this.editItem.username=this.user.username;
      this.editItem.password=this.user.password;
      // 设置编辑状态为true
      this.dialogVisible1 = true;
    },
    handleSavePassEdit(){
      axios.put("http://localhost:8080/Student/edit", this.editItem)
          .then(response => {
            // 处理编辑成功逻辑
            this.$message.success("编辑成功");
            this.closeDialog();
            this.fetchStudent(); // 刷新数据
          })
          .catch(error => {
            // 处理编辑失败逻辑
            console.error('Error editing item:', error);
            this.$message.error("编辑失败");
          });
    },
    closeDialog() {
      this.dialogVisible1=false;
      this.dialogVisible=false;
    }
    }
}


</script>
<style scoped>

</style>